import React, { createContext, useContext } from 'react';
import ReactDOM from 'react-dom';

// index.css 全局样式
import './index.css';

// Context实例, 以前 API
const ThemeContext = createContext();

const App = () => {
  // hooks API
  const theme = useContext(ThemeContext);

  return (
    <div className="app">
      <h1>App</h1>
      {/* 新 hook api */}
      <div>新hook api：{theme}</div>
      <hr />
      {/* class API */}
      <ThemeContext.Consumer>
        {(value) => '旧 class api：' + value}
      </ThemeContext.Consumer>
    </div>
  );
};

// root 组件
const Root = () => {
  return (
    <div>
      <ThemeContext.Provider value={'pink'}>
        <App />
      </ThemeContext.Provider>
    </div>
  );
};

ReactDOM.render(<Root />, document.getElementById('root'));